<template>
  <div class="category">
    <page-search
      :search-config="searchConfig"
      @reset-click="handleResetClick"
      @query-click="handleQueryClick"
    ></page-search>

    <page-content
      :content-config="contentConfig"
      ref="contentRef"
      @new-click="handleNewBtnClick"
      @edit-click="handleEditBtnClick"
    >
    </page-content>

    <page-modal ref="modalRef" :modal-config="modalConfig"></page-modal>
  </div>
</template>

<script setup lang="ts" name="category">
import usePageContent from '@/hooks/usePageContent'
import searchConfig from './config/search.config'
import usePageModal from '@/hooks/usePageModal'
import contentConfig from './config/content.config'
import modalConfig from './config/modal.config'
import PageContent from '@/components/page-content/PageContent.vue'
import PageSearch from '@/components/page-search/PageSearch.vue'
import PageModal from '@/components/page-modal/PageModal.vue'

const { contentRef, handleQueryClick, handleResetClick } = usePageContent()
const { modalRef, handleNewBtnClick, handleEditBtnClick } = usePageModal()
</script>

<style scoped></style>
